<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>权限管理</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/plugins/iCheck/custom.css" />
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/plugins/dataTables/dataTables.bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css" />
    <style type="text/css">
        .form-control {width: 200px;}
        .ibox-title {position: fixed;width: 100%;background: rgba(200, 200, 200, 0.3);}
        .jg {width: 100%;height: 95px;}
        .idt_td {text-indent: 30px;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <input type="button" class="btn btn-sm btn-primary" value="保存修改" id="save">
                    <select id="roles" class="form-control">
                        <option value="">…请选择角色…</option>
                        {foreach $roles as $role}
                        <option value="{$role.id}" {if($role.id==$role_id)}selected="selected"{/if}>{$role.role_name}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="jg"></div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th style="width: 300px">标识</th>
                            <th>名称</th>
                            <th>排序</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $list as $key=>$item}
                        <tr class="gradeX">
                            <td>{$item.identity}</td>
                            <td>{$item.title}</td>
                            <td>{$item.sort}</td>
                            <td>
                                <input type="checkbox" id="menu{$item.id}" class="menu_id" value="{$item.id}" {if(in_array($item.id, $has))}checked="checked"{/if}><label for="menu{$item.id}">拥有</label>
                            </td>
                        </tr>
                        {if(!empty($item.children))}
                        {foreach $item.children as $item2}
                        <tr class="gradeX">
                            <td class="idt_td">{$item2.identity}</td>
                            <td class="idt_td">{$item2.title}</td>
                            <td>{$item2.sort}</td>
                            <td>
                                <input type="checkbox" id="menu{$item2.id}" class="menu_id" value="{$item2.id}" data-pid="{$item2.pid}" {if(in_array($item2.id, $has))}checked="checked"{/if}><label for="menu{$item2.id}">拥有</label>
                            </td>
                        </tr>
                        {/foreach}
                        {/if}
                        {/foreach}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/layer/layer.js?v={php}echo time(){/php}"></script>
<script type="text/javascript">
    $(function () {
        $('.gradeX').each(function () {
            $(this).children('td:eq(3)').siblings().click(function () {
                let chk = $(this).parent('tr').find('.menu_id');
                chk.click()
            })
        });
        $('#roles').change(function () {
            if (parseInt($(this).val()) !== 0) {
                location.href = '/menu/power?role_id=' + $(this).val();
            }
        });
        $('.menu_id').click(function () {
            if ($(this).is(':checked')) {
                let $pid = $(this).data('pid');
                $('.menu_id').each(function () {
                    if ($(this).val() === $pid) {
                        $(this).prop('checked', true);
                    }
                });
            } else {
                // var $id = $(this).val();
                // $('.menu_id').each(function(){
                //     if ($(this).data('pid') == $id) {
                //         $(this).prop('checked', false);
                //     }
                // });
            }
        });
        $('#save').click(function () {
            let $roles = $('#roles')
            if ($roles.val() === '') {
                layer.msg('请选择角色', {icon: 5, time: 2000});
                return false
            }
            let $role_id = $roles.val();
            let $menu_ids = [];
            $('.menu_id').each(function () {
                if ($(this).is(':checked')) {
                    $menu_ids.push($(this).val());
                }
            });
            $.ajax({
                type: 'post', cache: false, dataType: 'json',
                url: '/menu/power',
                data: {'role_id': $role_id, 'menu_ids': $menu_ids},
                success: function (data) {
                    if (data.code === 200) {
                        layer.msg(data.message, {icon: 6, time: 1000});
                    } else {
                        layer.msg(data.message, {icon: 5, time: 1000});
                    }
                }
            });
        });
    });
</script>
</html>
